<script setup>
import { Plus, Check, Delete } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
import { getNote, addNewNote, delTask } from '../api/api'

const list = ref()
const userId = localStorage.getItem('userId')
const content = ref('')

const add = async (content) => {
  const res = await addNewNote({ content, userId })
  if (res.status) return ElMessage.warning(res.msg)
  ElMessage.success('新增记事本成功！')
  getList()
}

const del = async (id) => {
  const res = await delTask({ params: { id } })
  if (res.status) return ElMessage.warning(res.msg)
  ElMessage.success('删除记事本成功！')
  getList()
}

const getList = async () => {
  const res = await getNote({ params: { userId } })
  if (res.status) return ElMessage.warning('获取记事本失败！')
  list.value = res.data
}

onMounted(async () => {
  getList()
})
</script>
<template>
  <main style="padding: 20px">
    <div class="list-row" v-for="(row, index) in list" :key="index">
      <div style="width: calc(100% - 30px)">{{ row.content }}</div>
      <el-popconfirm title="确认删除?" @confirm="del(row.id)">
        <template #reference>
          <el-button style="float: right" type="danger" :icon="Delete" circle />
        </template>
      </el-popconfirm>
    </div>
    <el-input v-model="content" style="margin-top: 10px; height: 40px" placeholder="快速新增记事本">
      <template #append>
        <el-button :icon="Plus" @click="add(content)" />
      </template>
    </el-input>
  </main>
</template>
<style scoped lang="less">
.list-row {
  border-bottom: 0;
  padding: 8px 15px;
  margin-top: 10px;
  border-radius: 3px;
  background: rgb(188 211 255);
  display: flex;
}
.el-input {
  --el-input-border-color: #75a4fd;
  --el-input-bg-color: transparent;
  --el-input-hover-border-color: #bcd3ff;
  --el-input-focus-border-color: #75a4fd;
  ::placeholder {
    color: #a0bef6;
  }

  /deep/ .el-input-group__append {
    background-color: #d7e4ff;
    color: #1f6bfb;
    font-weight: bold;
  }
}
</style>
